<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
    <script src="${path}/resources/dist/js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
    <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
</head>
<body>
<div id="app">
    <template>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 10px 0">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" @click="drawer = true">添加角色</el-button>
    <el-drawer
            title="添加角色"
            :visible.sync="drawer"
            :direction="direction">
        <span>
                    <el-form :model="selectPermissions">
            <el-form-item label="请输入角色名" :label-width="formLabelWidth">
                <el-input placeholder="请输入角色名" :label-width="formLabelWidth"
                          v-model="selectPermissions.newRoleName"></el-input>
            </el-form-item>

            <el-form-item label="权限树" :label-width="formLabelWidth">
                <el-tree
                        :data="menuList"
                        show-checkbox
                        default-expand-all
                        node-key="mid"
                        ref="tree"
                        highlight-current
                        :filter-node-method="filterNode"
                        :props="po">
                </el-tree>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth">
                <el-button size="small" type="primary" @click="treeSubmit">提交</el-button>
            </el-form-item>
        </el-form>
        </span>
    </el-drawer>


    <el-table size="small" :data="roleList" highlight-current-row v-loading="loading" border
              element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column prop="rid" label="编号" width="150"></el-table-column>
        <el-table-column prop="rolename" label="角色名" width="150"></el-table-column>
        <el-table-column prop="state" label="是否可用" width="150">
            <template slot-scope="scope">
                <el-tag effect="dark">
                    {{scope.row.state==1?"可用":"不可用"}}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button @click="initUpdate(scope.row)" type="primary" size="small">修改</el-button>
                <el-button @click="deleteRole(scope.row)" type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background @current-change="currentChange" @size-change="sizeChange"
                   layout="sizes, prev, pager, next, jumper"
                   :page-sizes="[3, 6, 9]" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                   :current-page="pageInfo.page">
    </el-pagination>

    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
        <el-form :model="editForm">
            <el-form-item label="角色名" label-width="70px">
                <el-col :span="10">
                    <el-input type="hidden" v-model="editForm.rid"></el-input>
                    <el-input v-model="editForm.rolename"></el-input>
                </el-col>

            </el-form-item>
            <el-form-item label="是否可用" label-width="70px">
                <el-select v-model="editForm.state" placeholder="请选择">
                    <el-option label="可用" value=1></el-option>
                    <el-option label="无效" value=0></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editRole()">确 定</el-button>
        </div>
    </el-dialog>
    </template>


</div>
</body>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            formLabelWidth: "150px",
            menuList: [],
            po: {
                id: "parent_id",
                label: "menu_name",
                children: "sonList",
            },
            roleTypeSelect: [],
            selectPermissions: [],
            drawer: false,
            direction: 'rtl',
            editFormVisible: false,
            editForm: {},
            roleList: {},
            pageInfo: { //  分页数据
                pageSize: 3,// 每页显示的数据量
                page: 1, // 当前页
                total: 0 // 总条数
            },
        },
        methods: {
            treeSubmit() {
                vm.selectPermissions.treeData = this.$refs.tree.getCheckedKeys();
                console.log(vm.selectPermissions.treeData);
                vm.selectPermissions.treeData = window.JSON.stringify(vm.selectPermissions.treeData);
                let data = window.Qs.stringify(vm.selectPermissions);
                axios.post("${path}/tree.do?method=addTreeTwo", data).then(response => {
                    console.log(response)
                    if (response.data == "succeed") {
                        this.$notify({
                            title: '添加成功',
                            type: 'success'
                        });
                        this.search();
                    } else {
                        this.$notify.error({
                            title: '添加失败',
                        });
                    }
                });
            },
            search() {// 搜索游戏信息
                var data = window.Qs.stringify(this.roleList);
                axios.post("${path}/role.do?method=showAllRole", data).then(response => {
                    vm.roleList = response.data.dataList;
                    vm.pageInfo = {
                        pageSize: response.data.pageNum,// 每页显示的数据量
                        page: response.data.nowPage, // 当前页
                        total: response.data.totalNum // 总条数
                    };
                });
            }
            ,
            currentChange(val) {// 当前页发生变化时触发的事件
                this.roleList.page = val;
                this.search();
            }
            ,
            sizeChange(val) {// 每页显示的数据量变化时触发的事件
                this.roleList.pageSize = val;
                this.search();
            }
            ,
            initUpdate(row) {
                this.editForm = {
                    rid: row.rid,
                    rolename: row.rolename,
                    state: row.state.toString()
                }
                vm.editFormVisible = true
            },
            deleteRole(row) {
                axios.post("${path}/role.do?method=deleteRole&rid=" + row.rid).then(response => {
                    if (response.data == true) {
                        this.$notify({
                            title: '修改成功',
                            type: 'success'
                        });
                        vm.search();
                        vm.editFormVisible = false;// 关闭对话框
                    } else {
                        this.$notify.error({
                            title: '修改失败',
                        });
                    }
                });
            },
            editRole(row) {
                var data = window.Qs.stringify(this.editForm);
                axios.post("${path}/role.do?method=updateRole", data).then(response => {
                    if (response.data == true) {
                        this.$notify({
                            title: '修改成功',
                            type: 'success'
                        });
                        vm.search();
                        vm.editFormVisible = false;// 关闭对话框
                    } else {
                        this.$notify.error({
                            title: '修改失败',
                        });
                    }
                });
            },
        },
        mounted() {
            this.search();
            this.menuList =
            ${sessionScope.menus}
        }

    });
</script>
</html>
